<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes>
    <meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait>
    <meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width"
          name="viewport">
    <title>Title</title>
    <script src="/common/vue.min.js"></script>
    <script src="/common/axios.min.js"></script>
    <script src="/common/jquery.min.js"></script>
    <link rel="stylesheet" href="/wap/activity/dynamic/invite/index.css">
</head>
<body>
<div id="invite" class="clear">
    <header>
        <img src="/wap/activity/dynamic/invite/images/1.png" alt="">
    </header>
    <section class="ini1">
        <div class="ini-tit1">
            <span @click="iniBel" v-if="iniTel">邀请有礼</span>
            <span v-else>请登录</span>
        </div>
        <div class="ini-tit2">
            <span @click="iniCheck">查看邀请成功人数</span>
        </div>
        <div class="ini-ul">
            <div class="ini-list clear">
                <span class="top"></span>
                <ul class="clear">
                    <li v-for="item in contents" v-text="item"></li>
                </ul>
            </div>
        </div>
    </section>
    <footer>
        <img src="/wap/activity/dynamic/invite/images/2.png" alt="">
    </footer>
    <div :class="listTirs">
        <div class="list-head">
            <span class="list-close" @click="iniClose"></span>
            <p>{{listTable.length}}人邀请成功</p>
        </div>
        <ul class="list-ul">
            <li v-for="item in listTable">
                <img :src="item.avatar" alt="">
                <p v-text="item.nickName"></p>
            </li>
        </ul>
    </div>
</div>

<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>
<script src="/wap/activity/dynamic/invite/index.js"></script>
<script>
    var invite = new Vue({
        el: '#invite',
        data: {
            contents: {},
            iniTel: true,
            listTable: [],
            listTirs: 'listTir'
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var _this = this;
                axios.post(baseUrl + 'api/sys/invite/record/list', {}).then(function (response) {
                    if (response.data.code === 20000) {
                        _this.contents = response.data.data;
                        gd();
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            iniBel: function () {
                var _this = this;
                axios.post(baseUrl + 'api/sys/invite/inviteUrl', {}).then(function (response) {
                    if (response.data.code === 20000) {
                        console.log(response)
                        alert(JSON.stringify({
                            type: "share",
                            target: {
                                name: "web",
                                config: {
                                    title: " 你与股神只差一个app的距离",
                                    body: '你的好友已经开始使用股神院了,送你一年VIP,邀请你一起来!',
                                    image: response.data.data.registImg,
                                    url: baseUrl + response.data.data.registUrl+ '?inviterId=' + response.data.data.inviterId
                                }
                            }
                        }))
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            iniCheck: function () {
                var _this = this;
                if(!this.iniBel) {
                    return;
                }
                axios.post(baseUrl + 'api/sys/invite/user/list', {
                    size: 9999,
                    page: 1
                }).then(function (response) {
                    if (response.data.code === 20000) {
                        _this.listTable = response.data.data.content;
                        _this.listTirs = 'listTir active'
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            iniClose: function () {
                this.listTirs = 'listTir';
            }
        },
        created: function () {
            this.getNew();
        }
    });
    var s = 0;
    var sd;
    function gd() {
        var ss = setInterval(function () {
            if($('.ini-ul ul li').length>0){
                clearInterval(ss);
                $('.ini-ul ul').height($('.ini-ul ul li').length+ 'rem' );
                sd = setInterval(function () {
                    $('.ini-ul ul').css('top', s + 'rem');
                    s+=-.01;
                    if (s < (-$('.ini-ul ul li').length + 5)){
                        s = 0;
                    }
                },10)
            }
        },100);
    }
</script>
</body>
</html>